import { class_esy } from 'esy-ui';
import { useState } from 'react';

/**
 * 聊天的房间列表
 */
const roomlist = [
  {
    roomId: 1,
    nickname: '张飞', // 房间昵称
    name: '张翼德', // 房间名称
    isMute: false,
    isActive: true,
    profile: 'https://p6-passport.byteacctimg.com/img/user-avatar/0a1222ccfcb3765d94b2f598ebcceb26~40x40.awebp',
    messages: [
      {
        message: '这是最后一条消息',
        sendTime: '11:00',
        isRead: false,
        senderName: '关羽',
        senderNickname: '关云长',
        receiverName: '张翼德',
        receiverNickname: '张飞',
      },
    ],
  },
  {
    roomId: 2,
    nickname: '张飞', // 房间昵称
    name: '张翼德', // 房间名称
    isMute: false,
    isActive: true,
    profile: 'https://p6-passport.byteacctimg.com/img/user-avatar/0a1222ccfcb3765d94b2f598ebcceb26~40x40.awebp',
    messages: [
      {
        message: '这是最后一条消息',
        sendTime: '11:00',
        isRead: false,
        senderName: '关羽',
        senderNickname: '关云长',
        receiverName: '张翼德',
        receiverNickname: '张飞',
      },
    ],
  },
];

function Rooms() {
  const [actId, setActId] = useState(1);
  return (
    <div className='border-r border-split h-full w-56 max-w-60'>
      {roomlist.map((it) => {
        console.warn(it);
        // 这里需要补充一段时间处理的逻辑
        return (
          <div
            key={it.roomId}
            className={class_esy(['px-3 py-1 flex cursor-pointer', actId === it.roomId ? ' bg-blue-200' : 'hover:bg-gray-100'])}
            onClick={() => {
              if (it.roomId !== actId) {
                setActId(it.roomId);
              }
            }}
          >
            <img className='w-10 h-10 rounded-full mr-2 text' src={it.profile} alt='头像' />
            <div className='text-sm flex flex-1 flex-col justify-between'>
              <div className='flex items-start justify-between'>
                <div className='text-black mr-2 font-bold'>{it.nickname || it.name}</div>
                <div className='text-gray-400'>{it.messages[0].sendTime}</div>
              </div>
              <div className='flex items-end justify-between'>
                <div className='mr-2 text-gray-400 truncate text-xs'>{it.messages[0].message}</div>
                {it.isMute && <div>静音</div>}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default Rooms;
